<!-- 会员 - 充值余额 - 弹窗组件 -->
<template>
  <div>
    <CustomDialog v-model:visible="isShowDialog" top="2vh" curent-class="recharge-balance-dialog">
      <div class="dialog-content">
        <div class="pay-type-content">
          <div class="left-box">
            <div class="title">客户支付方式</div>
            <div class="scroll-list" v-if="rechargeTypeList.length">
              <div class="scroll-list-content">
                <div
                  class="scroll-item"
                  :class="{ 'scroll-item-active': selectActiveIndex === index }"
                  v-for="(item, index) in rechargeTypeList"
                  :key="index"
                  @click="handleSelect(index, item)"
                >
                  <img
                    v-if="selectActiveIndex === index"
                    class="image"
                    :src="imageData[item.method]?.activeImage"
                    alt=""
                  />
                  <img v-else class="image" :src="imageData[item.method]?.image" alt="" />
                  <div class="desc" v-if="item.method === 'balance'">会员支付</div>
                  <div class="desc" v-if="item.method === 'cash'">现金支付</div>
                  <div class="desc" v-if="item.method === 'alipay'">支付宝</div>
                  <div class="desc" v-if="item.method === 'wechat'">微信</div>
                  <div class="desc" v-if="item.method === 'on_account' && item.others.type === 1">
                    企业挂账
                  </div>
                  <div class="desc" v-if="item.method === 'on_account' && item.others.type === 2">
                    个人挂账
                  </div>
                  <div class="desc" v-if="item.method === 'integripay'">积分支付</div>
                  <div class="desc" v-if="item.method === 'virtual'">
                    {{ item.others && item.others.name ? item.others.name : '虚收支付' }}
                  </div>
                </div>
                <!-- 当一行有3个以上的元素时，添加占位元素 -->
                <div
                  class="scroll-list-item-zhanwei"
                  v-for="val in ['val1', 'val2', 'val3', 'val4']"
                  :key="val"
                ></div>
              </div>
            </div>
            <div class="form-box">
              <div class="form-item">
                <div class="dialog-input">
                  <input
                    class="input"
                    v-model.trim="dialogKeyword"
                    type="text"
                    placeholder="请输入客户支付的金额并确认"
                  />
                  <img
                    class="image"
                    src="@/assets/images/home/input-clear.png"
                    alt=""
                    @click="handleClearInput"
                    v-if="dialogKeyword"
                  />
                </div>
              </div>
            </div>
            <!-- 数字键盘组件 -->
            <NumberKeyboard
              v-model:keyword="dialogKeyword"
              @onInputKeyboard="onInputKeyboard"
              @onCancel="handleClearInput"
              @onConfirm="onConfirm"
              :loading="keyboardLoading"
            />
          </div>
          <div class="line"></div>
          <div class="right-box">
            <div class="title">客户已付金额</div>
            <div
              class="scroll-list"
              :class="{ 'scroll-list-right-height': rechargeOptionsList.length === 0 }"
            >
              <template v-if="payMethodList.length">
                <div class="scroll-item" v-for="(item, index) in payMethodList" :key="index">
                  <div class="image-desc">
                    <img
                      class="image"
                      v-if="imageData[item.pay_method]"
                      :src="imageData[item.pay_method].image"
                      alt=""
                    />
                    <div v-else class="image"></div>

                    <div class="desc" v-if="item.pay_method === 'alipay'">支付宝</div>
                    <div class="desc" v-else-if="item.pay_method === 'wechat'">微信</div>
                    <div class="desc" v-else-if="item.pay_method === 'cash'">现金支付</div>
                    <div class="desc " v-else>
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="money" @click.stop="handleCancelOrderPay(item.pay_method)">
                    ￥{{ item.money }}
                    <img class="shanchu-icon" src="@/assets/images/bill/shanchu-x.png" alt="" />
                  </div>
                </div>
              </template>
            </div>
            <template v-if="rechargeOptionsList.length">
              <div class="scroll-recharge-title">选择充值类型</div>
              <div class="scroll-recharge-list">
                <div
                  class="scroll-recharge-item"
                  :class="{ 'scroll-recharge-item-active': rechargeActiveIndex === index }"
                  v-for="(item, index) in rechargeOptionsList"
                  :key="item.plan_id"
                  @click="handleSelectRecharge(index, item)"
                >
                  {{ item.plan_name }}
                </div>
              </div>
            </template>
            <div class="money-desc-box">
              <div class="money-desc-left" v-if="rechargeType === 10">
                <div>
                  充值金额：￥
                  {{ fetchObjectDeepAttrValue(orderPaymentStatusInfo, 'orderInfo.money', 0) }}
                </div>
                <div>
                  <!-- 总已收金额：￥{{ receivedMoney }} -->
                </div>
              </div>
              <template v-if="rechargeType === 20">
                <div class="money-desc-left">
                  <div>充值金额：￥{{ rechargeActiveMoney }}</div>
                  <div>
                    <!-- 总已收金额：￥{{ rechargeActiveTotalMoney }} -->
                  </div>
                </div>
                <div class="money-desc-right">
                  <div>赠送金额：￥{{ rechargeActiveGiftMoney }}</div>
                </div>
              </template>
            </div>
            <div class="submit-btn-box">
              <div class="cancel-btn" @click="onCancel">取消</div>
              <div
                class="confirm-btn"
                @click="handleAshierTradeConfirmPay"
                :class="{ loading: confirmLoading }"
                :disabled="confirmLoading"
              >
                {{ confirmLoading ? '处理中...' : '确认充值' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </CustomDialog>

    <!-- 扫码弹框 -->
    <ScannerDialog
      v-model:visible="showScannerDialog"
      @onScan="handleScanResult"
      @onCancel="handleScanCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import NumberKeyboard from '@/components/NumberKeyboard/Index.vue'
import ScannerDialog from '@/components/ScannerDialog/index.vue'
import { isEmpty, dealAssignDataFunction, fetchObjectDeepAttrValue } from '@/utils/toolsValidate'
import { mathAdd, strNumberToFixed } from '@/utils/mathjsTool'
import { rechargePlanList, rechargeOrderPaymentInfo, rechargeOrderMoney } from '@/api/member'
import { paymentList, cashierOrderPay, cashierTradeQuery, ashierTradeConfirmPay } from '@/api/pay'
import { payMoneyOrderCancel } from '@/api/statistics'
import { bus } from '@/utils/bus'

interface Props {
  visible: boolean
  memberId: string
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'onSuccess'): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  memberId: ''
})

const emit = defineEmits<Emits>()

// 控制弹窗显示
const isShowDialog = computed({
  get: () => props.visible,
  set: val => emit('update:visible', val)
})

// 图片数据
const imageData = ref({
  balance: {
    image: new URL('@/assets/images/home/huiyuanzhifu.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/huiyuanzhifu-active.png', import.meta.url).href
  },
  cash: {
    image: new URL('@/assets/images/home/xianjin-icon.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/xianjin-icon.png', import.meta.url).href
  },
  on_account1: {
    image: new URL('@/assets/images/home/qiyeguazhang.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/qiyeguazhang.png', import.meta.url).href
  },
  on_account2: {
    image: new URL('@/assets/images/home/gerenguazhang.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/gerenguazhang.png', import.meta.url).href
  },
  integripay: {
    image: new URL('@/assets/images/home/jifendikou.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/jifendikou.png', import.meta.url).href
  },
  alipay: {
    image: new URL('@/assets/images/home/zhifubazhifu.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/zhifubazhifu.png', import.meta.url).href
  },
  wechat: {
    image: new URL('@/assets/images/home/wechat.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/wechat.png', import.meta.url).href
  },
  virtual: {
    image: new URL('@/assets/images/home/xushou.png', import.meta.url).href,
    activeImage: new URL('@/assets/images/home/xushou.png', import.meta.url).href
  }
})

// 充值类型的列表
const rechargeTypeList = ref<any[]>([])
// 选中对应的索引
const selectActiveIndex = ref(-1)
// 输入框的金额
const dialogKeyword = ref('')
// 充值类型列表
const rechargeOptionsList = ref<any[]>([])
// 当前选中充值类型的索引
const rechargeActiveIndex = ref(-1)
// 右侧显示对应的支付方式
const payMethodList = ref<any[]>([])
// 选中的支付方式||支付套餐类型
const selectActivePayMethod = ref<any>({})
// 选中的充值套餐金额
const rechargeActiveMoney = ref(0)
// 选中的充值套餐的赠送金额
const rechargeActiveGiftMoney = ref(0)
// 选中的充值套餐的总金额
const rechargeActiveTotalMoney = ref(0)
// 充值方式(10自定义金额 20套餐充值)
const rechargeType = ref(10)
// 订单支付状态
const orderPaymentStatusInfo = ref<any>(null)
// 选中的支付套餐类型
const selectActivePayType = ref<any>({})
// 按钮节流专用
const buttonDisabled = ref(false)
// 防止input导致重复请求
const isFlag = ref(false)
// 支付接口返回的code
const payment_out_trade_no = ref<string | null>(null)
// 确认按钮loading
const confirmLoading = ref(false)
// 数字键盘loading
const keyboardLoading = ref(false)

// 扫码弹框状态
const showScannerDialog = ref(false)

const scannerBackValue = ref('')

// 监听弹窗显示状态
watch(isShowDialog, val => {
  if (val) {
    getRechargePlanList()
    resetData()
    // 获取支付列表
    getPaymentList()
    // 获取会员充值支付信息
    getOrderPaymentInfo()
  }
})

// 监听挂账列表刷新事件
const handleGuazhangListRefresh = () => {
  console.log('触发刷新-1');
  if (isShowDialog.value) {
    getOrderPaymentInfo()
  }
}

onMounted(() => {
  console.log('挂账了-1');


  bus.on('guazhang-list-refresh', handleGuazhangListRefresh)
})

onUnmounted(() => {
  bus.off('guazhang-list-refresh', handleGuazhangListRefresh)
})

// 获取支付列表
const getPaymentList = async () => {
  try {
    const datas = {
      // 是否可使用虚拟支付(0:不可以； 1:可以)
      balance: 0
    }
    const res = await paymentList(datas)
    if (res.status === 200) {
      rechargeTypeList.value = dealAssignDataFunction([], res?.data)
    }
  } catch (error) {
    console.error('获取支付列表失败:', error)
  }
}

// 选中对应的支付方式
const handleSelect = (index: number, item: any) => {
  selectActiveIndex.value = index
  selectActivePayMethod.value = item
}

// 取消事件
const onCancel = () => {
  emit('update:visible', false)
}

// 清空输入框
const handleClearInput = () => {
  dialogKeyword.value = ''
}

// 接收数字键盘传过来的关键词
const onInputKeyboard = (val: string) => {
  dialogKeyword.value = val
  rechargeType.value = 10
}

// 选中对应的充值类型
const handleSelectRecharge = (index: number, item: any) => {
  dialogKeyword.value = String(item.money)
  nextTick(() => {
    rechargeActiveIndex.value = index
    rechargeType.value = 20
    selectActivePayType.value = item
    // 选中的充值套餐金额
    rechargeActiveMoney.value = item.money
    // 选中的充值套餐的赠送金额
    rechargeActiveGiftMoney.value = item.gift_money
    // 选中的充值套餐的总金额
    rechargeActiveTotalMoney.value = Number(
      strNumberToFixed(mathAdd(rechargeActiveMoney.value, rechargeActiveGiftMoney.value))
    )
  })
}

// 获取充值套餐类型列表
const getRechargePlanList = async () => {
  try {
    const res = await rechargePlanList({})
    if (res.status === 200) {
      rechargeOptionsList.value = res?.data?.list || []
    }
  } catch (error) {
    console.error('获取充值套餐列表失败:', error)
  }
}

// 重置数据
const resetData = () => {
  // 订单支付状态
  orderPaymentStatusInfo.value = null
  // 选中对应的索引
  selectActiveIndex.value = -1
  // 输入框的金额
  dialogKeyword.value = ''
  // 充值类型列表
  rechargeOptionsList.value = []
  // 当前选中充值类型的索引
  rechargeActiveIndex.value = -1
  // 右侧显示对应的支付方式
  payMethodList.value = []
  // 选中的支付方式
  selectActivePayMethod.value = {}
  // 选中的支付套餐类型
  selectActivePayType.value = {}
  // 选中的充值套餐金额
  rechargeActiveMoney.value = 0
  // 选中的充值套餐的赠送金额
  rechargeActiveGiftMoney.value = 0
  // 选中的充值套餐的总金额
  rechargeActiveTotalMoney.value = 0
  // 充值方式(10自定义金额 20套餐充值)
  rechargeType.value = 10
  isFlag.value = false
  // 重置loading状态
  keyboardLoading.value = false
  confirmLoading.value = false
}

// 确认提交事件【数字键盘组件】
const onConfirm = () => {
  if (selectActiveIndex.value === -1) {
    ElMessage.warning('请选择支付方式')
    return
  }
  if (isEmpty(dialogKeyword.value)) {
    ElMessage.warning('请输入自定义支付金额')
    return
  }
  if (rechargeType.value === 10 || rechargeType.value === 20) {
    keyboardLoading.value = true
    handleSubmit()
  }
}

// 确认充值
const handleSubmit = async () => {
  if (selectActiveIndex.value === -1) {
    ElMessage.warning('请选择支付方式')
    return
  }
  if (isEmpty(dialogKeyword.value) && rechargeType.value === 10) {
    ElMessage.warning('请输入自定义支付金额')
    return
  }
  if (isEmpty(selectActivePayType.value?.plan_id) && rechargeType.value === 20) {
    ElMessage.warning('请选择充值套餐类型')
    return
  }

  const datas: any = {
    // 订单id
    order_id: orderPaymentStatusInfo.value.orderInfo.order_id
  }

  if (rechargeType.value === 10) {
    // 用户充值本金(自定义金额必填)
    ;(datas as any).money = parseFloat(dialogKeyword.value) || 0
  } else {
    // 充值套餐id(套餐充值必填)
    ;(datas as any).plan_id = selectActivePayType.value.plan_id
  }

  try {
    const res = await rechargeOrderMoney(datas)
    if (res.status === 200) {
      console.log('🔍 当前支付方式:', selectActivePayMethod.value.method)

      if (['wechat', 'alipay'].includes(selectActivePayMethod.value.method)) {
        handleScanFunc()
        keyboardLoading.value = false
      } else {
        // 支付操作
        handleOrderPay()
      }
    }
  } catch (error) {
    keyboardLoading.value = false
  } finally {
    keyboardLoading.value = false
  }
}

// 支付操作
const handleOrderPay = async () => {
  debugger
  const datas: any = {
    order_id: orderPaymentStatusInfo.value?.orderInfo?.order_id, // 订单id
    method: selectActivePayMethod.value?.method, // 支付方式
    extra: {
      money: 0, // 支付金额
      order_type: 100,
      name: ''
    } as any
  }
  if (selectActivePayMethod.value?.method === 'virtual') {
    datas.extra.name = selectActivePayMethod.value?.others?.name
  }
  if (['wechat', 'alipay'].includes(selectActivePayMethod.value.method)) {
    ;(datas.extra as any).pay_type = 'faceToFace'
    ;(datas.extra as any).auth_code = scannerBackValue.value
  }

  if (rechargeType.value === 10) {
    ;(datas.extra as any).money = parseFloat(dialogKeyword.value) || 0
  } else {
    // 选择套餐类型进行充值
    ;(datas.extra as any).money = rechargeActiveMoney.value
  }

  try {
    const res = await cashierOrderPay(datas)
    clearScanValue()
    if (res.status === 200) {
      if (['wechat', 'alipay'].includes(selectActivePayMethod.value.method)) {
        payment_out_trade_no.value = res.data.payment.out_trade_no
        fetchCashierTradeQuery()
      } else {
        if (rechargeType.value === 10) {
          // 清空自定义充值的输入框
          handleClearInput()
        }
        // 订单进入结算状态，查询订单支付信息
        orderPaymentStatusInfo.value.orderInfo.order_id = null
        getOrderPaymentInfo()
        ElMessage.success('操作成功')
        keyboardLoading.value = false
      }
    }
  } catch (error) {
    console.error('支付操作失败:', error)
    clearScanValue()
    keyboardLoading.value = false
  }
}

// 确认提交充值结算
const handleAshierTradeConfirmPay = async () => {
  if (payMethodList.value.length === 0) {
    ElMessage.error('暂无可充值金额，请先在左侧操作')
    return
  }

  confirmLoading.value = true
  const datas = {
    order_id: orderPaymentStatusInfo.value.orderInfo.order_id, // 订单id
    extra: {
      order_type: 100 // 订单类型(10:桌台订单 20:挂账回款订单 100:充值订单)
    }
  }

  try {
    const res = await ashierTradeConfirmPay(datas)
    if (res.status === 200) {
      ElMessage.success('充值结算成功')
      // 订单进入结算状态，查询订单支付信息
      orderPaymentStatusInfo.value.orderInfo.order_id = null
      getOrderPaymentInfo()
      emit('onSuccess')
      emit('update:visible', false)
    }
  } catch (error) {
    console.error('充值结算失败:', error)
  } finally {
    confirmLoading.value = false
  }
}

// 获取会员充值支付信息
const getOrderPaymentInfo = async () => {
  const datas: any = {
    // 会员用户id
    userId: props.memberId
  }

  if (orderPaymentStatusInfo.value?.orderInfo?.order_id) {
    ;(datas as any).order_id = orderPaymentStatusInfo.value.orderInfo.order_id
  }

  try {
    const res = await rechargeOrderPaymentInfo(datas)
    if (res.status === 200) {
      orderPaymentStatusInfo.value = dealAssignDataFunction(null, res?.data?.detail)
      payMethodList.value = dealAssignDataFunction([], res?.data?.detail?.payList)
    }
  } catch (error) {
    console.error('获取会员充值支付信息失败:', error)
  }
}

// 取消选中支付的操作
const handleCancelOrderPay = async (payMethod: string) => {
  if (buttonDisabled.value) return
  buttonDisabled.value = true

  const datas = {
    order_id: orderPaymentStatusInfo.value.orderInfo.order_id, // 订单id
    method: payMethod, // 支付方式
    extra: {
      order_type: 100
    }
  }

  try {
    const res = await payMoneyOrderCancel(datas)
    if (res.status === 200) {
      ElMessage.success('取消支付成功')
      // 刷新订单信息
      getOrderPaymentInfo()
    }
  } catch (error) {
    console.error('取消支付失败:', error)
  } finally {
    buttonDisabled.value = false
  }
}

// 打开扫码弹框
const handleScanFunc = () => {
  console.log('🔍 打开扫码弹框')
  showScannerDialog.value = true
}

// 处理扫码结果
const handleScanResult = (scanValue: string) => {
  console.log('🔍 收到扫码结果:', scanValue)
  scannerBackValue.value = scanValue
  showScannerDialog.value = false
  handleOrderPay()
}

// 处理扫码取消
const handleScanCancel = () => {
  console.log('🔍 用户取消扫码')
  showScannerDialog.value = false
  keyboardLoading.value = false
}

// 查询支付宝||微信支付的结果
const fetchCashierTradeQuery = async () => {
  const datas = {
    out_trade_no: payment_out_trade_no.value,
    method: selectActivePayMethod.value.method // 支付方式
  }

  try {
    const res = await cashierTradeQuery(datas)
    if (res.status === 200) {
      if (res.data.isPay) {
        // 清空自定义充值的输入框
        handleClearInput()
        // 订单进入结算状态，查询订单支付信息
        orderPaymentStatusInfo.value.orderInfo.order_id = null
        getOrderPaymentInfo()
        ElMessage.success(res.message)
        emit('onSuccess')
        keyboardLoading.value = false
      } else {
        // 显示支付结果确认弹窗
        ElMessage.warning('支付未完成，请重新扫码')
        handleScanFunc()
      }
    }
  } catch (error) {
    console.error('查询支付结果失败:', error)
    keyboardLoading.value = false
  }
}

// 清空扫码枪获取的值
const clearScanValue = () => {
  if (['wechat', 'alipay'].includes(selectActivePayMethod.value.method)) {
    isFlag.value = false
    scannerBackValue.value = ''
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  align-items: flex-start;

  .pay-type-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;

    .left-box {
      width: 516px;

      .title {
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        padding-left: 16px;
      }

      //滚动条整体的大小
      .scroll-list::-webkit-scrollbar {
        width: 6px;
        height: 0;
      }
      //滚动条里滑动的滑块
      .scroll-list::-webkit-scrollbar-thumb {
        height: 60px;
        background: #d2d2d2;
        border-radius: 3px;
      }
      //滚动条底层样式
      .scroll-list::-webkit-scrollbar-track {
        display: none;
      }

      .scroll-list {
        width: 516px;
        height: 248px;
        border: 1px solid #e2e2e2;
        border-radius: 12px;
        overflow-y: auto;
        margin-top: 20px;
        box-sizing: border-box;
        padding: 0 24px 20px 24px;

        .scroll-list-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .scroll-item {
            box-sizing: border-box;
            padding-left: 6px;
            width: 140px;
            height: 56px;
            background: #f4f4f4;
            border-radius: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-top: 20px;
            color: #333333;

            .image {
              flex-shrink: 0;
              width: 30px;
              height: 30px;
              margin-right: 10px;
            }

            .desc {
              font-size: 14px;
              font-family:
                PingFang SC,
                PingFang SC-Regular;
              font-weight: 400;
            }
          }

          .scroll-item-active {
            background: #7c0a03 !important;
            color: #fff !important;
          }
        }
      }

      // flex布局的列表进行占位操作
      .scroll-list-item-zhanwei {
        width: 140px;
        overflow: hidden;
      }

      .form-box {
        margin-top: 40px;
        margin-bottom: 30px;

        .form-item {
          .dialog-input {
            width: 516px;
            height: 48px;
            background: #ffffff;
            border: 1px solid #d2d2d2;
            border-radius: 12px;
            box-sizing: border-box;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .input {
              width: 400px;
              font-size: 14px;
              font-family:
                PingFang SC,
                PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #333333;
              outline: none;
              border: none;
            }

            .image {
              flex-shrink: 0;
              width: 24px;
              height: 24px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .line {
      width: 1px;
      height: 718px;
      background: #e2e2e2;
      margin-left: 30px;
    }

    .right-box {
      margin-left: 30px;

      .title {
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        padding-left: 16px;
      }

      //滚动条整体的大小
      .scroll-list::-webkit-scrollbar {
        width: 6px;
        height: 0;
      }
      //滚动条里滑动的滑块
      .scroll-list::-webkit-scrollbar-thumb {
        height: 100px;
        background: #d2d2d2;
        border-radius: 3px;
      }
      //滚动条底层样式
      .scroll-list::-webkit-scrollbar-track {
        display: none;
      }

      .scroll-list {
        background: #f4f4f4;
        width: 504px;
        height: 300px;
        border: 1px solid #e2e2e2;
        border-radius: 12px;
        overflow-y: auto;
        margin-top: 20px;
        box-sizing: border-box;
        padding: 0 24px 20px 24px;

        .scroll-item {
          box-sizing: border-box;
          padding: 0 20px;
          width: 448px;
          height: 48px;
          background: #ffffff;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          color: #333333;
          cursor: pointer;

          .image-desc {
            display: flex;
            align-items: center;

            .image {
              flex-shrink: 0;
              width: 30px;
              height: 30px;
              margin-right: 20px;
            }

            .desc {
              font-size: 16px;
              font-family:
                PingFang SC,
                PingFang SC-Regular;
              font-weight: 400;
            }
          }

          .money {
            font-size: 16px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            display: flex;
            align-items: center;
            text-align: right;

            .shanchu-icon {
              flex-shrink: 1;
              width: 20px;
              height: 20px;
              margin-left: 10px;
            }
          }
        }
      }

      .scroll-list-right-height {
        height: 500px !important;
      }

      //滚动条整体的大小
      .scroll-recharge-list::-webkit-scrollbar {
        width: 6px;
        height: 0;
      }
      //滚动条里滑动的滑块
      .scroll-recharge-list::-webkit-scrollbar-thumb {
        height: 100px;
        background: #d2d2d2;
        border-radius: 3px;
      }
      //滚动条底层样式
      .scroll-recharge-list::-webkit-scrollbar-track {
        display: none;
      }

      .scroll-recharge-title {
        margin-top: 30px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        padding-left: 16px;
      }

      .scroll-recharge-list {
        width: 504px;
        height: 156px;
        border: 1px solid #e2e2e2;
        border-radius: 12px;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        box-sizing: border-box;
        padding: 0 24px 20px 24px;

        .scroll-recharge-item {
          display: inline-block;
          margin-top: 20px;
          padding: 0 20px;
          height: 48px;
          background: #ffffff;
          border: 1px solid #d2d2d2;
          border-radius: 12px;
          font-size: 16px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #333333;
          line-height: 48px;
          cursor: pointer;
        }

        .scroll-recharge-item-active {
          border-color: #7c0a03;
          color: #7c0a03;
        }
      }

      .scroll-recharge-list::after {
        content: '';
        min-width: 120px;
      }

      .money-desc-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 30px;

        .money-desc-left {
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;

          > div:first-child {
            margin-bottom: 20px;
          }
        }

        .money-desc-right {
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
        }
      }

      .submit-btn-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 52px;
        margin-top: 20px;

        .cancel-btn {
          width: 124px;
          height: 52px;
          border: 1px solid #d2d2d2;
          border-radius: 12px;
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #353535;
          line-height: 52px;
          cursor: pointer;
        }

        .confirm-btn {
          width: 190px;
          height: 52px;
          background: #7c0a03;
          border-radius: 12px;
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 52px;
          cursor: pointer;
          margin-left: 20px;
          transition: all 0.3s ease;

          &.loading {
            background: #ccc;
            cursor: not-allowed;
          }

          &:disabled {
            background: #ccc;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.recharge-balance-dialog {
  max-height: unset !important;
}
</style>
